<!---
  @author: andy
  @description: 侧边栏组件
-->
<template>
  <div class="layout-sidebar" :style="{width : `${sidebarWidth}px` , ...sidebarStyle}">
    <div class="layout-sidebar-inner">
      <template v-if="configStore.showSidebarLogo">
        <Logo :collapsed="config.sidebar.collapsed" />
      </template>
      <div class="layout-sidebar-menu">
        <div class="layout-menu">
          <a-menu mode="inline" v-model:selected-keys="selectedKeys" :inline-indent="12" :inline-collapsed="config.sidebar.collapsed" @click="onClickMenuItem">
            <template v-for="item in (config.app.layout === 'mixed-nav' ? accessStore.mixedSidebarMenus : accessStore.accessMenus)" :key="item.name">
              <template v-if="!item.children || item.children.length === 0">
                <a-menu-item :key="item.name" :title="false">
                  <template #icon>
                    <img v-if="item.icon" class="menu-icon" :src="item.icon" />
                  </template>
                  {{item.name}}
                </a-menu-item>
              </template>
              <template v-else>
                <a-sub-menu :key="item.name">
                  <template #icon>
                    <img v-if="item.icon" class="menu-icon" :src="item.icon" />
                  </template>
                  <template #title>{{item.name}}</template>
                  <template v-for="menu in item.children" :key="menu.name">
                    <template v-if="!menu.children || menu.children.length === 0">
                      <a-menu-item :key="menu.name">
                        <template #icon>
                          <img v-if="item.icon" class="menu-icon" :src="item.icon" />
                        </template>
                        {{menu.name}}
                      </a-menu-item>
                    </template>
                    <template v-else>
                      <SubMenu :menu="menu" />
                    </template>
                  </template>
                </a-sub-menu>
              </template>
            </template>
          </a-menu>
        </div>
      </div>
      <div class="layout-sidebar-bottom">
        <IconButton @click="onClick">
          <component :is="config.sidebar.collapsed ? DoubleRightOutlined : DoubleLeftOutlined" class="icon"  />
        </IconButton>
      </div>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { useConfigStore } from '@/stores/configs/config';
import { storeToRefs } from 'pinia';
import Logo from './Logo.vue';
import { useAccessStore } from '@/stores/access/access';
import SubMenu from './SubMenu.vue';
import { DoubleLeftOutlined , DoubleRightOutlined } from '@ant-design/icons-vue';
import IconButton from './IconButton.vue';
import { computed, ref, watchEffect, type CSSProperties } from 'vue';
import { findTreeNodeByValue } from '@/utils/tree';
import { useRouter , useRoute } from 'vue-router';
import type { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
const emits = defineEmits(['collapse']);
const route = useRoute();
const router = useRouter();
const selectedKeys = ref<string[]>([]);
const configStore = useConfigStore();
const { config } = storeToRefs(configStore);
const accessStore = useAccessStore();
const sidebarWidth = computed(() => {
  return configStore.isFullscreen ? 0 : config.value.sidebar.collapsed ? 80 : config.value.sidebar.width;
});
const sidebarStyle = computed(() => {
  return (config.value.app.layout === 'header-sidebar-nav' || config.value.app.layout === 'mixed-nav' ? {
    marginTop : `${config.value.header.enable ? config.value.header.height : 0}px`,
    position : 'fixed',
    top : '0px',
    left : '0px',
    zIndex : '11',
    height : `calc(100% - ${config.value.header.enable ? config.value.header.height : 0}px)`
  } : {}) as CSSProperties;
});
const onClick = () => {
  configStore.updateConfig({
    sidebar : {
      collapsed : !config.value.sidebar.collapsed
    }
  });
  emits('collapse' , sidebarWidth.value);
}
const onClickMenuItem = ({key}: MenuInfo) => {
  const currentMenu = findTreeNodeByValue(accessStore.accessMenus , 'name' , key , {childProps : 'children'});
  if (currentMenu?.isExternal) {
    window.open(currentMenu.path);
  } else if (currentMenu?.isIframe) {
    router.push(currentMenu.path as string);
    // router.push({
    //   path : `/iframe/${encodeURIComponent(currentMenu.path)}`
    // })
  } else {
    router.push(currentMenu?.path as string);
  }
}
watchEffect(() => {
  selectedKeys.value = [route.meta.title as string];
})
</script>
<style lang='less' scoped>
.layout-sidebar {
  height: 100%;
  border-right: 0.01rem solid;
  position: relative;
  transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  .useTheme({
    border-color: border-color;
  });
  .layout-sidebar-inner {
    display: flex;
    height: 100%;
    overflow: hidden;
    flex-flow: column;
    .layout-sidebar-menu {
      flex: 1;
      overflow: hidden;
      margin-top: 0.1rem;
      .layout-menu {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        .menu-icon {
          width: 0.16rem;
          height: 0.16rem;
          object-fit: cover;
          transition: all 0.3s;
        }
      }
    }
    .layout-sidebar-bottom {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 0.16rem;
      border-top: 0.01rem solid;
      .useTheme({
        border-color: border-color;
      });
      .icon {
        font-size: var(--font-size-base);
      }
    }
  }
}
</style>